import React, { useRef, useImperativeHandle } from 'react';
import { View, Animated, StyleSheet, TouchableWithoutFeedback } from 'react-native';

const RecorderAnimation = React.forwardRef(({ onStateChange }, ref) => {
  const sizeAnim = useRef(new Animated.Value(60)).current;
  const borderRadiusAnim = useRef(new Animated.Value(30)).current;
  const corner1X = useRef(new Animated.Value(0)).current;
  const corner2X = useRef(new Animated.Value(0)).current;
  const corner3X = useRef(new Animated.Value(0)).current;
  const corner4X = useRef(new Animated.Value(0)).current;

  const isBigCircle = useRef(true); // 当前状态：大圆或四角
  const isAnimating = useRef(false); // 是否正在动画中，避免重复触发

  // 暴露方法
  useImperativeHandle(ref, () => ({
    triggerAnimation: toggleShape,
  }));

  const duration = 300; // 0.3秒

  const toggleShape = () => {
    if (isAnimating.current) return; // 还在动画中，阻止重复触发
    isAnimating.current = true;

    if (isBigCircle.current) {
      // 从大圆切换成四角
      Animated.parallel([
        Animated.timing(sizeAnim, {
          toValue: 30,
          duration,
          useNativeDriver: false,
        }),
        Animated.timing(borderRadiusAnim, {
          toValue: 5,
          duration,
          useNativeDriver: false,
        }),
        Animated.stagger(20, [
          Animated.timing(corner1X, { toValue: -50, duration, useNativeDriver: false }),
          Animated.timing(corner2X, { toValue: 50, duration, useNativeDriver: false }),
          Animated.timing(corner3X, { toValue: -50, duration, useNativeDriver: false }),
          Animated.timing(corner4X, { toValue: 50, duration, useNativeDriver: false }),
        ]),
      ]).start(() => {
        isBigCircle.current = false;
        isAnimating.current = false; // 动画结束
        if (onStateChange) onStateChange(true);
      });
    } else {
      // 从四角回到大圆
      Animated.parallel([
        Animated.timing(sizeAnim, {
          toValue: 60,
          duration,
          useNativeDriver: false,
        }),
        Animated.timing(borderRadiusAnim, {
          toValue: 30,
          duration,
          useNativeDriver: false,
        }),
        Animated.stagger(20, [
          Animated.timing(corner1X, { toValue: 0, duration, useNativeDriver: false }),
          Animated.timing(corner2X, { toValue: 0, duration, useNativeDriver: false }),
          Animated.timing(corner3X, { toValue: 0, duration, useNativeDriver: false }),
          Animated.timing(corner4X, { toValue: 0, duration, useNativeDriver: false }),
        ]),
      ]).start(() => {
        isBigCircle.current = true;
        isAnimating.current = false;
        if (onStateChange) onStateChange(false);
      });
    }
  };

  return (
    <TouchableWithoutFeedback onPress={toggleShape}>
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.bigCircle,
            {
              width: sizeAnim,
              height: sizeAnim,
              borderRadius: borderRadiusAnim,
            },
          ]}
        >
          {/* 四个角的点 */}
          <Animated.View style={[styles.corner, { transform: [{ translateX: corner1X }] }]} />
          <Animated.View style={[styles.corner, { transform: [{ translateX: corner2X }] }]} />
          <Animated.View style={[styles.corner, { transform: [{ translateX: corner3X }] }]} />
          <Animated.View style={[styles.corner, { transform: [{ translateX: corner4X }] }]} />
        </Animated.View>
      </View>
    </TouchableWithoutFeedback>
  );
});

const styles = StyleSheet.create({
  container: {
      width: 80,
      height: 80,
    position: 'relative',
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    borderRadius: '50%',
    borderWidth: 5,
    borderColor: 'white',
    backgroundColor: 'transparent',
    padding: 5
  },
  bigCircle: {
    backgroundColor: 'red',
    position: 'relative',
      justifyContent: 'center',
      alignItems: 'center',
  },
  corner: {
    position: 'absolute',
    width: 20,
    height: 20,
    borderRadius: 10,
  },
});

export default RecorderAnimation;